import { useEffect } from "react";
import {IRouteComponentProps, useDispatch, useSelector} from "umi";
import {HeartOutlined , EyeOutlined ,BranchesOutlined} from '@ant-design/icons';400
import moment from 'moment';
import "./filing.less"
interface articleitem {
  id: string;
  title: string;
  cover: string;
  summary: string;
  content: string;
  html: string;
  toc: string;
  status: string;
  views: number;
  likes: number;
  isRecommended: boolean;
  needPassword: boolean;
  isCommentable: boolean;
  publishAt: string;
  createAt: string;
  updateAt: string;
  category: Category;
}

interface Category {
  id: string;
  label: string;
  value: string;
  createAt: string;
  updateAt: string;
}
const  Filingarticle:React.FC<IRouteComponentProps>=(props:any,{history})=>{
    const dispatch = useDispatch();
    let store=useSelector(state=>state.yjsarchive);
    let {flag}=useSelector(state=>state.index);
    let value=props.match.params.filing; 
    let label="";
    store.rightbottom.map((item:any)=>{
        if(item.value==value){
            label=item.label;
        }
    })
console.log(store.article);

    
    return <div className={flag?"yjscategorywhite":"yjscategoryblack"}>
        {/* 左侧 */}
        <div className="left_category">
            {/* 左侧顶部 */}
            <div className="left_category_top">
                {
                   
                    
                }
            </div>
            {/* 左侧底部 */}
            <div className="left_category_bottom">
            {
               label&&store.article?store.article[0].map((item:articleitem)=>{
                   console.log("别闹",store.article);
                   
                return <div key={item.id} className='item'>
                <p> <span>{item.title} </span> <span> 大约{item.category && moment(item.category.updateAt, "YYYYMMDD").fromNow() } </span> <span> 丨 </span><span> {item.category && item.category.label} </span></p>
                <dl>
                    <dt>
                        <img src={item.cover} alt=""/>
                    </dt>
                    <dd>
                        <p> {item.summary}</p>
                        <p><HeartOutlined/>{item.likes} <EyeOutlined/>{item.views}<BranchesOutlined />分享 </p>
                    </dd>
                </dl>
            </div>
            }):""
        }
            </div>
        
        </div>
        <div className="right_category">

        </div>
    </div>
}
export default Filingarticle;